<script setup lang="ts">
const modelValue = defineModel()

interface Props {
  options: SelectOptionType[]
}

const props = defineProps<Props>()
const emit = defineEmits(['change'])

const handleClick = (menu: SelectOptionType) => {
  modelValue.value = menu.value
  emit('change', modelValue.value)
}
</script>

<template>
  <el-space v-model="modelValue" :size="10" class="flex align-center ml10 tab-menu">
    <div
      v-for="(menu, index) in options"
      :key="index"
      :class="{ 'color-primary': menu.value === modelValue }"
      class="tab-menu-item cursor-pointer"
      @click="handleClick(menu)"
    >
      {{ menu.label }}
    </div>
  </el-space>
</template>

<style scoped lang="scss">
.tab-menu {
  .tab-menu-item {
    padding: 0 10px;

    &:hover {
      color: var(--el-color-primary);
    }
  }
}
</style>
